前端预渲染

如果在页面发布前就实现渲染(输入html),是不是可行。
不需要服务端的事

考虑到puppeteer 的能力。或者结合webpack

prerender-spa-plugin: https://github.com/chrisvfritz/prerender-spa-plugin

This is the stable 3.x version of prerender-spa-plugin based on puppeteer.
The goal of this plugin is to provide a simple prerendering solution that is easily extensible and usable for any site or single-page-app built with webpack.

2020.3.8 星期一 20:33

为什么要使用预渲染?
为了应付SEO(国内特别是百度)考虑在网站(vue技术栈系列)做一些优化。大概有几种方案可以考虑:

服务端做优化:
第一,ssr,vue官方文档给出的服务器渲染方案,这是一套完整的构建vue服务端渲染应用的指南,具体参考https://cn.vuejs.org/v2/guide/ssr.html
第二,nuxt 简单易用,参考网站 https://zh.nuxtjs.org/guide/installation

前端做优化:
第三,vue-meta-info + prerender-spa-plugin做预渲染,这个是针对单页面的meta SEO的另一种思路,参考网站 https://zhuanlan.zhihu.com/p/29148760
第四,phantomjs 页面预渲染,具体参考 phantomjs.org (已经暂停维护了)
甚至我一度考虑过第五种方案来应付百度:做假html节点(节点最终不展示出来)。

权衡了一下,做服务端渲染是没有人力物力了,所以选用了预渲染的方式来处理(第三种),其中遇到几个大坑,记录一下。

knowledge is no pay,reward is kindness
0%